<template>
	<view>
		<!-- 这里是对应的页面 -->
		<homePage v-if="PageCur=='home'"></homePage>

		<!-- 底部操作条：背景颜色、对应图标、字体颜色，可自定义 -->
		<view class="cu-bar tabbar bg-white foot">
			<!-- 首页 -->
			<view class="action" :class="PageCur=='home'?'text-green':'text-gray'" data-cur="home" @click="NavChange">
				<view class="cuIcon-homefill"></view> 
				首页
			</view>
			<!-- 消息 -->
			<view class="action" :class="PageCur=='similar'?'text-green':'text-gray'" data-cur="similar"
				@click="NavChange">
				<view class="cuIcon-similar"></view> 消息
			</view>
			<!-- 中间发布按钮 -->
			<view class="action add-action" :class="PageCur=='sub'?'text-green':'text-gray'" data-cur="sub"
				@click="NavChange">
				<!-- <button class="cu-btn cuIcon-formfill bg-green shadow">
				</button> -->
				<image class="mind-img" src="/static/tabbar/order.png" mode="aspectFit"></image>
				订单
			</view>
			<!-- 购物车、右上角有数字角标 -->
			<view class="action" :class="PageCur=='cart'?'text-green':'text-gray'" data-cur="cart" @click="NavChange">
				<view class="cuIcon-cart">
					<!-- <view class="cu-tag badge">99</view> -->
				</view>
				百科
			</view>
			<!-- 我的、左上角红色圆点 -->
			<view class="action" :class="PageCur=='mine'?'text-green':'text-gray'" data-cur="mine" @click="NavChange">
				<view class="cuIcon-my">
					<!-- <view class="cu-tag badge"></view> -->
				</view>
				我的
			</view>
		</view>

	</view>
</template>
<!-- "tabBar": {
   "color": "#C0C4CC",
   "selectedColor": "#006BFE",
   "borderStyle": "black",
   "backgroundColor": "#ffffff",
   "fontSize": "18px",
   "iconWidth": "20px",
   "list": [
     {
       "pagePath": "pages/index/index",
       "iconPath": "static/tabbar/home.png",
       "selectedIconPath": "static/tabbar/home-active.png",
       "text": "首页"
     },
     {
       "pagePath": "pages/message/index",
       "iconPath": "static/tabbar/message.png",
       "selectedIconPath": "static/tabbar/message-active.png",
       "text": "消息",
       "badge": {
         "dot": false,
         "text": "1"
       }
     },
     {
       "pagePath": "pages/order/index",
       "iconPath": "static/tabbar/order.png",
       "selectedIconPath": "static/tabbar/order-active.png",
       "text": "订单"
     },
     {
       "pagePath": "pages/mine/index",
       "iconPath": "static/tabbar/mine.png",
       "selectedIconPath": "static/tabbar/mine-active.png",
       "text": "我的"
     }
   ]
 }, -->
<script>
	export default {
		data() {
			return {
				PageCur: 'home'
			}
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			}
		}
	}
</script>

<style scoped>
	.cu-bar.tabbar .action.add-action::after {
		width: 50px;
		height: 50px;
		background: #0BCA89;
		z-index: 1;
	}

	.mind-img {
		height: 42px;
		width: 42px;
		position: absolute;
		top: -22px;
		left: 19px;
		z-index: 9;
	}
</style>